<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }

    #btn-wrap{margin:100px auto;text-align:center;}


</style>
<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>用户所属部门管理</legend>
        </fieldset>

        <form class="layui-form " >






            <div class="layui-form-item">
                <label class="layui-form-label">部门:</label>
                <div class="layui-input-block" style="z-index: 10000">
                    <input type="text" name="HandoverCompany"   placeholder="请输入部门名称" value="" id="HandoverCompany" class="layui-input" style="position:absolute;width:80%;" lay-verify="required"  onkeyup="search()" autocomplete="off">
                    <select type="text" name="depguid"    id="hc_select" lay-filter="hc_select" autocomplete="off"   lay-verify="required" class="layui-select" lay-search>
                        <option value="">请输入部门名称</option>
                    </select>
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">人员: </label>
                <div class="layui-input-block" id="tag_ids2" name="userguid">
                    <select type="text"      autocomplete="off"   lay-verify="required" class="layui-select" >
                        <option value="">人员</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"> </label>
                <div class="layui-input-block">

                </div>
            </div>

            <div class="layui-form-item" style="height: 200px">
                <label class="layui-form-label">  </label>
                <div class="layui-input-block" >

                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'AddUserLinkDepa',

        data () {
            return {
                houses:[],
                users:[
                    {guid:"",realname:"测试", status:"0"}
                ],
                count:0
            }
        },
        mounted() {
            let that = this;

            this.houses = that.loadDepart(that);
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                    form.on('submit(submit)', function (fdata) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/produce/Reldepuser!add.action',
                        data: fdata.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toast("添加成功");
                                that.$parent.switchPage('UserLinkDepaList');
                            } else {
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
//                that.loadUser("");
//                layui.use(['layer','form','jquery','selectM','selectN'],function(){
//                    $ = layui.jquery;
//                    var form = layui.form
//                        ,selectN = layui.selectN
//                        ,selectM = layui.selectM;
//
//
//                    //多选标签-所有配置
//                    var tagIns2 = selectM({
//                        //元素容器【必填】
//                        elem: '#tag_ids2'
//
//                        //候选数据【必填】
//                        ,data:  []
//
//                        //默认值
//                        ,selected: [12,17]
//
//                        //最多选中个数，默认5
//                        ,max : 99
//
//                        //input的name 不设置与选择器相同(去#.)
//                        ,name: 'userguid'
//
//                        //值的分隔符
//                        ,delimiter: ','
//
//                        //候选项数据的键名
//                        ,field: {idName:'id',titleName:'name'}
//
//
//                    });
//
//
//
//                    //监听重置按钮
//                    $('form').find(':reset').click(function(){
//                        $('form')[0].reset();
//                        tagIns2.set();//默认值
//                        return false;
//                    });
//
//
//
//                });
//
                form.on('select(hc_select)', function (data) {
                    that.count ++;
                    var message = $("select[name=depguid]").val();
                    var data = that.loadUser(message)

                    for(var i=0; i< that.count;i++){
                        that.reloadselect(data)

                    }

                    if(that.count == 3){
                        that.reloadselect(data)
                        that.reloadselect(data)
                        that.reloadselect(data)
                    }
                    if(that.count == 4){
                        that.reloadselect(data)
                        that.reloadselect(data)
                    }
                    if(that.count == 5){
                        that.reloadselect(data)

                    }




                });
//



            });

        },
        methods: {
            loadDepart: function (that) {
                $.ajax({
                    url: '/sales/Department!listAll.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        if (res.info != 'error' ) {
                            $.each(res.info, function (index, item) {
                                $('#hc_select').append(new Option(item.name + "(" + item.code + ")", item.guid));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {

                    }
                });
            },loadUser(dep){
                var that = this;
                var result  = [];
                $.ajax({
                    url: '/produce/Reldepuser!getDepUser.action',
                    type: "post",
                    dataType: "json",
                    async:false,
                    data:{depguid:dep},
                    success: function(res) {
                        var myArray=new Array()
                        if (res.info != 'error' ) {
                            $.each(res.info, function (index, item) {
                                myArray[index] = {id:item.guid,name:item.realname + "(" + item.telphone + ") " };
                            });
                            that.users =myArray;
                            result =myArray;
                            layui.form.render("select");
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {

                    }
                });

                return result;
            },reloadselect(data){

                layui.use(['form'], function () {
                 layui.use(['layer','form','jquery','selectM'],function(){
                    $ = layui.jquery;
                     var form = layui.form,selectM = layui.selectM;


                    //多选标签-所有配置
                    var tagIns2 = selectM({
                        //元素容器【必填】
                        elem: '#tag_ids2'

                        //候选数据【必填】
                        ,data: data

                        //默认值
                        ,selected: [12,17]

                        //最多选中个数，默认5
                        ,max : 99

                        //input的name 不设置与选择器相同(去#.)
                        ,name: 'userguid'

                        //值的分隔符
                        ,delimiter: ','

                        //候选项数据的键名
                        ,field: {idName:'id',titleName:'name'}


                    });
                     form.render('select');
               });



                });


            }
        }
    }
</script>
